<template>
  <div id="app">
    <h1>app</h1>
    <h1 ref="yangyang"></h1>
    <button @click="btn">get ref</button>
    <son ref="shaerzi"></son>
    <gui-nv></gui-nv>
    <son-one></son-one>
  </div>
</template>

<script>
import GuiNv from "./components/GuiNv.vue";
import Son from "./components/Son.vue";
import SonOne from "./components/SonOne.vue";
/* 
ref传值 子传父
注：
ref不同情况下指向内容不一样
在普通html标签上时，它指向该标签对象
在组件标签上时，它指向该组件对象

$children  子传父 数组
$parent    父传子  对象 


parent 父母  在子组件中说父组件 
children 子  在父组件中说子组件


provide inject 父级组件向子级组件传递消息
爷爷辈的组件向重孙子传值
爷爷  儿子   孙子  重孙子


叔侄 不能是传









*/
export default {
  name: "App",
  data() {
    return {
      msg: "青花瓷",
    };
  },
  /* provide: {
    msg: "青花瓷",
  }, */
  provide() {
    return {
      msg: this.msg,
    };
  },
  created() {
    console.log(this);
    console.log(this.$children);
  },
  components: { Son, GuiNv, SonOne },
  methods: {
    btn() {
      console.log(this.$refs.yangyang);
      console.log(this.$refs.shaerzi.msg);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
